<template>
  <div
    :class="{'hidden':hidden}"
    class="pagination-container"
  >
    <el-pagination
      :params="params"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="nextPage ? totalNum : endTotalNum"
      popper-class="pagination-dropdown"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <div
      v-if="nextPage === true"
      class="pagination-info"
    >
      当前显示 <span v-if="total>0">{{ (page-1)*limit+1 }}-{{ page*limit }} </span><span v-else>0-0</span>， 共 <span class="total">{{ totalHint }}</span> 条记录
    </div>
    <div
      v-if="nextPage === false"
      class="pagination-info"
    >
      当前显示 <span v-if="total>0">{{ (page-1)*limit+1 }}-{{ page*limit }} </span><span v-else>0-0</span>， 共 <span class="total">{{ endTotalHint }}</span> 条记录
    </div>
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'
/**
* 参数说明：
*  total:接口返回总页数(后台返回参数为total)
*  page:当前查询页数（后台返回参数为page）
*  params：查询分页数据
*  例如：{
*        page: 1,
*        rows: 7,
*        sort: '',
*        order: '',
*        pageFlag: true,
*        onlyCountFlag: false,
*        parentId: '',
*        filtersRaw: [{ 'id': '', 'property': 'user_id', 'operator': 'LIKE', 'value': '' }]
*      }
*pageSizes：[7, 20, 30, 50, 100]（分页条数选择查询数组）
*
*autoScroll：Boolean （是否返回顶部）
*  limit：每页查询条数（返回参数为rows）
*/

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    limit: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50, 100]
      }
    },
    layout: {
      type: String,
      default: 'sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: false
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      totalNum: 0, // 显示条数
      totalHint: 0,
      nextPage: true,
      endtTotalHint: 0,
      endTotalNum: 0
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  watch: {
    total() {
      this.freshInfo()
    }
  },
  methods: {
    /**
         * 数据变化动态更新条数
         * 1.获取每一页显示多少条rows limit
         * 2.用每一页返回多少条数据确定是否有下一页 total
         * 3.假如有下一页用totalNum = page*rows+1 来显示页码
         * 4.当到最后一页将页数
         */
    freshInfo() {
      // alert(1)
      const total = this.total
      const rows = this.limit
      // total > rows说明有下一页
      if (total > this.page * rows) {
        this.totalNum = total
        this.totalHint = `${total - 1}+`
      } else {
        // 说明已经到最后一页了
        this.nextPage = false
        this.totalNum = this.page * rows
        this.endTotalNum = this.page * rows
        this.totalHint = `${total}`
        this.endTotalHint = `${total}`
      }
    },
    handleSizeChange(val) {
      const tableRequestParam = new FormData()
      tableRequestParam.append('page', this.currentPage)
      tableRequestParam.append('rows', val)
      tableRequestParam.append('sort', this.params.sort)
      tableRequestParam.append('order', this.params.order)
      tableRequestParam.append('pageFlag', this.params.pageFlag)
      tableRequestParam.append('onlyCountFlag', this.params.onlyCountFlag)
      tableRequestParam.append('filtersRaw', JSON.stringify(this.params.filtersRaw))
      this.$emit('pagination', tableRequestParam)
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      const tableRequestParam = new FormData()
      tableRequestParam.append('page', val)
      tableRequestParam.append('rows', this.pageSize)
      tableRequestParam.append('sort', this.params.sort)
      tableRequestParam.append('order', this.params.order)
      tableRequestParam.append('pageFlag', this.params.pageFlag)
      tableRequestParam.append('onlyCountFlag', this.params.onlyCountFlag)
      tableRequestParam.append('filtersRaw', JSON.stringify(this.params.filtersRaw))
      this.$emit('pagination', tableRequestParam)
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>
